<template>
  <div>
    <c-query-toolbar @query="handleQuery" :loading="queryLoading" :params="queryParams" v-show="showQuery"
      :query-button-disabled="disabled">
      <template #toolbar-left>
        <slot name="toolbar-left" />
      </template>
      <template #toolbar-right>
        <slot name="toolbar-right" />
      </template>
      <el-form-item label="接口名称">
        <el-input v-model.trim="queryParams.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="接口路径">
        <el-input v-model.trim="queryParams.path" clearable></el-input>
      </el-form-item>
    </c-query-toolbar>
    <el-table ref="tableRef" class="c-mg-t-5p" :data="data" border v-loading="tableLoading">
      <slot name="column-selection">
        <el-table-column type="index" width="35" align="center" v-if="singleSelect">
          <template #default="{ row }">
            <el-radio :model-value="selectedRows.find(i => true)?.id" :value="row.id" class="el-radio-no-label"
              @change="handleSingleSelect(row)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" width="35" align="center" v-if="multipleSelect">
          <template #header>
            <el-checkbox :model-value="isAllSelect" :indeterminate="isIndeterminate" @change="handleMutipleAllSelect" />
          </template>
          <template #default="{ row }">
            <el-checkbox :model-value="selectedRows.some(i => i.id == row.id)"
              @change="handleMultipleSelect(row, $event)"></el-checkbox>
          </template>
        </el-table-column>
      </slot>
      <el-table-column prop="name" width="200" label="接口名称" show-overflow-tooltip />
      <el-table-column prop="path" min-width="200" label="接口路径" show-overflow-tooltip />
      <slot name="column"></slot>
    </el-table>
    <el-pagination class="c-mg-t-5p" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="getDataParams.pageIndex" v-model:page-size="getDataParams.pageSize"
      @change="handlePageChange" />
    <permissionMenusDialog ref="permissionMenusDialog" :in-dialog="inDialog" />
  </div>
</template>
<script setup>
import permissionMenusDialog from "@/components/sys/role/menuPermissionDialog.vue";
import api from "@/api/sys/api";
import { ref, useTemplateRef, computed } from "vue";
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  showQuery: {
    type: Boolean,
    default: true
  },
  inDialog: {
    type: Boolean,
    default: false
  },
  singleSelect: {
    type: Boolean,
    default: false
  },
  multipleSelect: {
    type: Boolean,
    default: false
  }
})
const queryParams = ref({
  name: "",
  path: ""
})
const total = ref(0)
const queryLoading = ref(false)
const tableRef = useTemplateRef("tableRef");
const tableLoading = defineModel("tableLoading", {
  type: Boolean,
  default: false
})
// const selectedRows = defineModel("selectedRows", {
//   type: Array,
//   default: () => []
// })

const selectedRows = ref([])

const data = ref([])
const expandQuery = defineModel("expand-query", {
  type: Boolean,
  default: true
})
const emits = defineEmits(["select"])
const handleQuery = async (params) => {
  getDataParams.value = { ...getDataParams.value, ...params };
  await getData();
}
const handlePageChange = async () => {
  await getData();
}

const getDataParams = ref({ pageIndex: 1, pageSize: 10 });
const getData = async () => {
  queryLoading.value = true
  tableLoading.value = true
  const res = await api.getPageList(getDataParams.value);
  data.value = res.data.list;
  total.value = res.data.total;
  queryLoading.value = false
  tableLoading.value = false
}
const handleSingleSelect = (row) => {
  selectedRows.value = [row]
  emits("select", row, true)
}

const handleMultipleSelect = (row, checked) => {
  const rowIndex = selectedRows.value.findIndex(i => i.id == row.id);
  if (checked && rowIndex < 0) {
    selectedRows.value.push(row)
  } else if (!checked && rowIndex >= 0) {
    selectedRows.value.splice(rowIndex, 1)
  }
  emits("select", row, checked)
}
//全选
const handleMutipleAllSelect = (checked) => {
  for (let row of data.value) {
    handleMultipleSelect(row, checked);
  }
}

//是否全选状态
const isAllSelect = computed(() => {
  const ids = selectedRows.value.map(i => i.id)
  return data.value.length > 0 && data.value.every(i => ids.includes(i.id))
})
//是否半选
const isIndeterminate = computed(() => {
  const ids = selectedRows.value.map(i => i.id)
  return data.value.some(i => ids.includes(i.id)) && data.value.some(i => !ids.includes(i.id))
})

defineExpose({
  getData,
  selectedRows
})
</script>